<template>
  <div class="cart">
    <nav-bar class="cartnav">
      <div class="title" slot="center">购物车({{ getcartlength }})</div>
    </nav-bar>
    <cart-list></cart-list>
    <cartbottom class="cartbottom"/>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import cartList from "./childcops/cartList.vue";
import cartbottom from "./childcops/cartbottom.vue";
export default {
  components: {
    NavBar,
    cartList,
    cartbottom,
  },
  computed: {
    getcartlength() {
      return this.$store.state.cartList.length;
    },
  },
};
</script>

<style scoped>
.cart {
  /* height: 300px; */
  padding-top: 44px;
}
.cartnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.cartbottom{
  position: fixed;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
